<template>
	<view class="warp">
		<view class="header">
			<tab style="width: 60%;" v-model="activeKey" :navData="tabTitle" @tabClick="tabClick"></tab>
			<view class="btn"
				style="width: 40%;display: flex;justify-content: flex-end;background-color: #FFFFFF;height: 100rpx; margin-top: 30rpx;">
				<button  style="height: 60rpx;border-radius: 30rpx;line-height: 60rpx;background-color: #527DFF;" class="iconfont" type="primary" @click="jumpTo1()" size="mini">&#xe648;&nbsp;&nbsp;发布</button></view>
				
		</view>
		<view class="box_warp" >
			<view class="item" @click="jumpTo(item)" v-for="(item,index) in data" :key="index">
				<image class="touxiang" :src="item.user_image" mode="aspectFill"></image>
				<view class="name">{{item.user_nickname}}</view>
				<view class="type">发布于&nbsp;&nbsp;&nbsp;{{item.type}}</view>
				<view class="content">{{item.content}}</view>
				<view class="imagelist" >
					<view class="mr10" v-for="(a,index) in item.imagelist" :key="index">
							<image  class="suolue"  :src="a" mode="aspectFill"></image>
					</view>
				</view>
				<view class="footer">
					<view class="items iconfont">&#xe605;&nbsp;&nbsp;{{item.share_num}}</view>
					<view class="items iconfont">&#xe604;&nbsp;&nbsp;{{item.like_num}}</view>
					<view class="items iconfont">&#xe61a;&nbsp;&nbsp;{{item.comment_num}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tab from '../../../components/Mark-Tab/Tab.vue'
	import {interactiveLists} from '../../../api/api.js'
	export default {
		components: {
			tab
		},
		data() {
			return {
				type:"最新",
				data: [],
				user_id:3,  //暂时写死
				id:null,
				activeKey: 0,
				tabTitle: [{
					label: '最新'
				}, {
					label: '热门'
				},  ]
			}
		},
		created() {
			this.datainit()
		},
		methods: {
			tabClick(e) {
				this.data =[]
				this.activeKey = e.index
				console.log(e)
				this.type = e.item.label
				this.datainit()
			},
			// 初始化
			datainit(){
				let data = {
					type:this.type,
					page:0,
					user_id:3
				}
				// 请求首页数据
				let sign = this.$util(data)
				interactiveLists(sign).then(res => {
				this.data = res.data
				})
			},
			// 跳转
			jumpTo1(){
				uni.navigateTo({
					url:"/pages/creatword/index"
				})
			},
			// 跳转
			jumpTo(e){
				console.log(e)
				this.id = e.id
				uni.navigateTo({
					url:`/pages/wordDetal/index?id=${this.id}&uid=${this.user_id}`
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.header {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		position: sticky;
		z-index: 9;
		top: 0;
	}


	.item {
		width: 85%;
		height: 400rpx;
		margin-top: 30rpx;
		background-color: #FFFFFF;
		padding: 30rpx;
		border-radius: 10rpx;
		margin-left: 50%;
		transform: translateX(-50%);
		position: relative;

		.name {
			position: absolute;
			top: 20rpx;
			left: 130rpx;
		}
		.type {
			position: absolute;
			top: 60rpx;
			left: 130rpx;
		}
		.content {
			position: absolute;
			top: 100rpx;
			width: 84%;
			height: 250rpx;
			padding: 30rpx 0;
			// background-color: blue;
			left: 30rpx;
		}
		.imagelist{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			height: 160rpx;
			position: absolute;
			top: 200rpx;
		}
		.footer{
			display: flex;
			justify-content: flex-start;
			position: absolute;
			bottom: 30rpx;
			right: 0rpx;
			.items{
				width: 100rpx;
				color: #999999;
			}
		}
	}

</style>
